<template>
  <div class="template coupon-template">
    <div class="title">优惠券</div>
    <div class="content">
      <panel-common />
      <div class="block">
        <div class="dt">内容</div>
        <div class="dd">
          <div class="item">
            <div class="item-label">
              设置优惠券数量
            </div>
            <el-select v-model="couponNum" placeholder="请选择优惠券数量">
              <el-option label="1" :value="1" />
              <el-option label="2" :value="2" />
              <el-option label="3" :value="3" />
              <el-option label="4" :value="4" />
              <el-option label="5" :value="5" />
              <el-option label="6" :value="6" />
            </el-select>
          </div>
        </div>
        <div class="dd">
          <div class="item item-column">
            <div class="item-label">
              选择模板
            </div>
            <div class="item-image coupon-template-select" @click='showSelectCouponTemplateFlag = true'>
              <!-- <el-image v-if="couponTemplate.url" :src="couponTemplate.url"></el-image> -->
              <img v-if="couponTemplate.url" :src="couponTemplate.url" alt=""/>
              <div v-else class="empty">
                <i class="el-icon-s-ticket" />
              </div>
            </div>
          </div>
        </div>
        <div class="dd">
          <div class="item item-column">
            <div class="item-label">
              关联优惠券
            </div>
            <div class="item-image" @click="showSelectCouponFlag = true">
              <img src="../../../../assets/demo/coupons/1-003.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="dd">
          <div class="item-tips">
              *注意：若此模块已发布过，则进行的修改在点击<em>保存后立即生效</em>。
            </div>
        </div>
        <div class="submit">
          <el-button type="primary" @click="save">保存并生效</el-button>
        </div>
      </div>
    </div>
    <select-coupon-template :visible.sync="showSelectCouponTemplateFlag" :num="couponNum" @select="selectedCouponTemplateHandle" />
    <select-coupon :visible.sync="showSelectCouponFlag" :num="couponNum" @select="selectedCouponHandle"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { STORE_NAMESPACE, typeConstants } from '../../../../config/'
import { uuid } from '../../../../common/'
import PanelCommon from '../common'
import SelectCouponTemplate from '../../../modules/select-coupon-template/'
import SelectCoupon from '../../../modules/select-coupon/'
export default {
  name: 'PanelCoupon',
  components: {
    PanelCommon,
    SelectCouponTemplate,
    SelectCoupon
  },
  data () {
    return {
      showSelectCouponTemplateFlag: false, // 选择模板
      showSelectCouponFlag: false, // 关联优惠券
      couponNum: 1, // 优惠券数量
      couponTemplate: {}, // 所选优惠券模板
      coupons: [] // 关联的优惠券
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current || {},
      currentIndex: state => state[STORE_NAMESPACE].currentIndex,
      shopId: state => state[STORE_NAMESPACE].shopId
    })
  },
  methods: {
    selectedCouponTemplateHandle (couponTemplate) {
      this.couponTemplate = { ...couponTemplate }
    },
    selectedCouponHandle (coupons) {
      this.coupons = coupons
    },
    save () {
      this.$confirm('保存立即生效, 确认保存?').then(() => {
        this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
          type: 'update',
          value: this.createNewCoupon(),
          index: this.currentIndex
        })
      }).catch(() => {})
    },
    createNewCoupon () {
      const couponTemplate = this.couponTemplate
      // const coupons = this.coupons
      // todo 创建优惠券
      return {
        ...this.current,
        url: couponTemplate.url,
        width: couponTemplate.width, // 宽度
        height: couponTemplate.height, //高度
        elements: [ // 设置点击区域
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-template {
  .coupon-template-select {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    .empty {
      background-color: #b1b1b1;
      font-size: 50px !important;
    }
  }
}
</style>